<template>
  <div class="more-action-box" v-if="showActions" :style="{position}">
    <div class="more-action-mark" @click="closeActions" :style="{position}"></div>
    <div class="more-aciton" :style="{position}">
      <div class="title-box">
        <svg class="icon" aria-hidden="true">
          <use v-bind:xlink:href="getIcon(openItem.type,openItem.nameSuffix)"></use>
        </svg>
        <div class="title">{{openItem.name || openItem.dcName}}</div>
        <svg class="close-button" aria-hidden="true" @click="closeActions">
          <use xlink:href="#keowledge-mobile-guanbi"></use>
        </svg>
      </div>
      <div class="action-boxs">
        <template v-for="(item,index) in actionList" v-if="isAuth()">
          <div v-if="item.type=='action' && getShowItem(item)" class="action-item" :key="index" @click="doAction(item)">
            <!-- <svg class="action-icon" aria-hidden="true">
              <use v-bind:xlink:href="`#${item.icon}`"></use>
            </svg> -->
            <i class="action-icon keowledge-mobile-iconfont" :class="[item.icon]" :style="{color:getActionItemAuth(item)?'':'#D7D8DB'}"></i>
            <div class="action-label" :style="{color:getActionItemAuth(item)?'':'#D7D8DB'}">{{$t(item.label)}}</div>
          </div>
          <div v-if="item.type=='line' && getShowItem(item)" class="line-box" :key="index"></div>
        </template>
        <jvs-empty imgSrc="@/assets/images/common/noAuth.png" :text='$t("message.empty.noAuth")' style="padding:2rem 0px;" size="11.875rem" v-if="!isAuth()"></jvs-empty>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits(["doAction"])
const props = defineProps({

})
const actionList = [
  {type:'action',label:'message.buttons.addLabel',icon:'keowledge-mobile-a-huaban1',method:'addTag',showList:["document_map", "document_xlsx", "document_flow", "document_html", "md",'xmind'],authName:'document_update'},
  {type:'action',label:'message.buttons.share',icon:'keowledge-mobile-fenxiang',method:'share',showList:["document_map", "document_xlsx", "document_flow", "document_html", "md",'xmind','document_upload'],authName:'document_share'},
  {type:'line',label:'',icon:'',method:'',showList:["document_map", "document_xlsx", "document_flow", "document_html", "md",'xmind','document_upload']},
  {type:'action',label:'message.buttons.move',icon:'keowledge-mobile-yidong',method:'move',showList:[],authName:'document_move'},
  {type:'action',label:'message.buttons.copyLink',icon:'keowledge-mobile-fuzhilianjie',method:'copy',showList:[],hiddenList:['knowledge','directory'],authName:''},
  {type:'line',label:'',icon:'',method:'',showList:[]},
  {type:'action',label:'message.buttons.reName',icon:'keowledge-mobile-zhongmingming',method:'reName',showList:[],authName:'document_update'},
  {type:'action',label:'message.buttons.delete',icon:'keowledge-mobile-shanchu',method:'del',showList:[],authName:'document_delete'},
]
const showActions = ref(false)
const openItem = ref({})
const authList = ref([])
function isOffice(val = ''){
  return val.indexOf('office_')!=-1
}

function getShowItem(item){
  let flag = false
  if((openItem.value.type=='document_upload' || isOffice(openItem.value.type)) && ['docx','xlsx','pptx','pdf','csv'].indexOf(openItem.value.nameSuffix)!=-1){
    flag = true
  }
  if(item.showList.indexOf(openItem.value.type)!=-1){
    flag = true
  }
  if(item.showList.length==0) flag = true
  if(item.hiddenList && item.hiddenList.indexOf(openItem.value.type) !=-1) flag = false
  return flag
}
function openActions(item){
  openItem.value = item
  authList.value = []
  openItem.value.dcIdentifying.forEach((item)=>{
    authList.value.push(item.identifyingKey)
  })
  showActions.value = true
}
function closeActions(){
  showActions.value = false
}
function doAction(item){
  if(getActionItemAuth(item)){
    emit('doAction',item)
  }
}
function isAuth(){
  let flag =true
  return flag
}
function getActionItemAuth(item){
  let flag = false
  if(item.authName){
    flag = authList.value.indexOf(item.authName)!=-1
  }else{
    flag = !item.authName
  }
  return flag
}
defineExpose({
  openActions,
  closeActions
})
</script>
<style lang="scss" scoped>
.more-action-box{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 100;
  .more-action-mark{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    background: rgba(54,59,76,0.5);
    z-index: 0;
  }
  .more-aciton{
    position: absolute;
    width: 100%;
    bottom: 0px;
    z-index: 1;
    background-color: #f5f6f7;
    border-radius: .75rem .75rem 0px 0px;
    padding: 1rem .375rem .375rem;
    box-sizing: border-box;
    .title-box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .icon{
        width: 1.5rem;
        height: 1.5rem;
        margin-left: .75rem;
      }
      .title{
        width: calc(100% - 3.75rem);
        color: #363B4C;
        font-size: .9375rem;
        @include SourceHanSansCN-Bold;
        margin-left: .75rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .close-button{
        width: 1rem;
        height: 1rem;
        margin-right: .75rem;
      }
    }
    .action-boxs{
      margin-top: .75rem;
      padding: 0.1rem 1.5rem;
      box-sizing: border-box;
      background: #FFFFFF;
      border-radius: .4375rem;
      .action-item{
        margin: 1.25rem 0px;
        display: flex;
        align-items: center;
        .action-icon{
          width: 1rem;
          height: 1rem;
        }
        .action-label{
          margin-left: .75rem;
          font-size: .9375rem;
          @include SourceHanSansCN-Regular;
        }
      }
      .line-box{
        margin: 1.25rem 0px;
        height: .0625rem;
        background: #EEEFF0;
      }
    }
  }
}
</style>